<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-21 19:03:26
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-12 16:54:18
 * @FilePath: /XMate-h5/src/components/choosePeople/components/BreadcrumbNav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white h-[54px] px-4 py-3 flex items-center">
    <div class="flex-1 overflow-x-auto whitespace-nowrap" ref="scrollView">
      <template v-for="(item, idx) in items" :key="item.id">
        <span
          class="cursor-pointer"
          :class="{ 'text-yxt-blue': idx !== items.length - 1 }"
          @click="$emit('click', idx)"
          >{{ item.name }}</span
        >
        <van-icon
          size="14"
          class="mx-1"
          name="arrow"
          v-if="idx < items.length - 1 && items.length > 1"
        />
      </template>
    </div>

    <div v-if="enableSearch" class="shadow-left">
      <van-icon v-if="!isSearch" name="search" size="20" @click="isSearch = true" />
      <van-search
        v-else
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @cancel="isSearch = false"
        @search="handleSearch"
        @update:modelValue="handleSearch"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";
const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  showBack: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["back", "click", "search"]);

const searchText = ref("");
function handleSearch() {
  console.log("handleSearch: ", searchText.value);
  emit("search", searchText.value);
}

const scrollView = ref(null);
watch(props.items, () => {
  // 使用 nextTick 确保 DOM 更新完成后再滚动
  nextTick(() => {
    setTimeout(() => {
      if (scrollView.value) {
        const scrollContainer = scrollView.value;
        const scrollWidth = scrollContainer.scrollWidth;
        const clientWidth = scrollContainer.clientWidth;

        // 只有当内容宽度大于容器宽度时才滚动
        if (scrollWidth > clientWidth) {
          scrollContainer.scrollTo({
            left: scrollWidth - clientWidth,
            behavior: "smooth",
          });
        }
      }
    }, 100);
  });
});

const enableSearch = false;
const isSearch = ref(false);
</script>

<style lang="less" scoped>
.breadcrumb-nav {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  min-height: 48px;

  .back-icon {
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 20px;
    cursor: pointer;
  }

  .breadcrumb-content {
    flex: 1;
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE and Edge

    &::-webkit-scrollbar {
      display: none; // Chrome, Safari, Opera
    }
  }

  .breadcrumb-item {
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 0;
    flex-shrink: 0;

    &:hover {
      opacity: 0.8;
    }
  }

  .breadcrumb-separator {
    margin: 0 4px;
    color: #999;
    flex-shrink: 0;
  }

  .shadow-left {
    box-shadow: -8px 0px 15px -3px rgba(0, 0, 0, 0.1);
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>
